<template>
  <div class="createPage">
    <div style="display: flex; justify-content: center; padding-top: 131px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
        style="width: 440px"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="ruleForm.oldPassword"
            placeholder="请输入"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword1">
          <el-input
            v-model="ruleForm.newPassword1"
            placeholder="请输入"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="再次确认新密码" prop="newPassword2">
          <el-input
            v-model="ruleForm.newPassword2"
            placeholder="请输入"
            show-password
          ></el-input>
        </el-form-item>
        <br />
        <br />
        <el-form-item>
          <el-button @click="resetForm('ruleForm')" style="width: 120px"
            >重置</el-button
          >
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="width: 120px"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { isPassword, regPassNum } from "@/utils/validate";
// import md5 from "js-md5";
import crypto from "@/crypto";
import { getToken, getUserInfo, clearCache } from "@/utils/public";
export default {
  name: "passwordVue",
  data() {
    const checkPassword = (rule, value, callback) => {
      if (value.indexOf(" ") > 0) {
        callback(new Error("只能包含数字、大写字母、小写字母或特殊符号"));
      }
      if (value.length < 8 || value.length > 32) {
        callback(new Error("密码长度8-32个字符"));
      }
      if (isPassword(value)) {
        callback(new Error("只能包含数字、大写字母、小写字母或特殊符号"));
      }
      if (regPassNum(value) !== 3 && regPassNum(value) !== 4) {
        callback(new Error("数字、大写字母、小写字母和特殊符号至少包含3种"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "change" },
          { validator: checkPassword, trigger: "change" },
        ],
        newPassword1: [
          { required: true, message: "请输入新密码", trigger: "change" },
          { validator: checkPassword, trigger: "change" },
        ],
        newPassword2: [
          { required: true, message: "请确认新密码", trigger: "change" },
          { validator: checkPassword, trigger: "change" },
        ],
      },
      ruleForm: { oldPassword: "", newPassword1: "", newPassword2: "" },
    };
  },
  created() {
  },
  methods: {
    getToken,
    getUserInfo,
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.passwordEditFn();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    passwordEditFn() {
      if (this.ruleForm.newPassword1 != this.ruleForm.newPassword2) {
        this.$message.warning("新密码不一致");
      } else {
        this.$http
          .post("/sys/user/updatePassword", {
            operationType: "updatePassword",
            oldPassword: crypto.set(this.ruleForm.oldPassword),
            newPassword: crypto.set(this.ruleForm.newPassword2),
            // oldPassword: md5(this.ruleForm.oldPassword),
            // newPassword: md5(this.ruleForm.newPassword2),
          })
          .then((res) => {
            if (res.code === "0000") {
              this.$message.success("修改成功，请重新登录");
              this.$http.post("sys/user/logout").then((res) => {
          if (res.code === "0000") {
            clearCache();
            this.$router.push("/login");
            this.$store.commit("resetState");
          }
        });
            
            }
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.createPage {
  background: #fff;
  color: #666;
  margin-top: 20px;
  height: 84vh;
  .uploadImg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    color: #4f595f;
    position: relative;
    font-size: 24px;
    font-weight: 600;
    &::before {
      content: "";
      width: 4px;
      height: 24px;
      background: #03bfc6;
      position: absolute;
      left: -34px;
      top: 7px;
    }
  }
  .wrap {
    width: 400px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
